<template>
  <div class="detail">
    <div class="nav">
      <el-menu
        class="el-menu-vertical"
        :default-active="defaultActive"
        :collapse="isCollapse"
      >
        <el-menu-item index="0">
          <i class="el-icon-s-home"> </i>
        </el-menu-item>
        <el-menu-item index="1" @click="isCollapse = false">
          <i class="el-icon-s-unfold"></i>
          <span slot="title">打开折叠栏</span>
        </el-menu-item>
        <el-menu-item index="2" @click="isCollapse = true">
          <i class="el-icon-s-fold"></i>
          <span slot="title">收起折叠栏</span>
        </el-menu-item>
        <el-menu-item
          index="3"
          @click="
            isUser = true;
            isTable = false;
            isSetting = false;
          "
        >
          <i class="el-icon-user"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
        <el-menu-item
          index="4"
          @click="
            isUser = false;
            isTable = true;
            isSetting = false;
          "
        >
          <i class="el-icon-document"></i>
          <span slot="title">用户信息</span>
        </el-menu-item>
        <el-menu-item
          index="5"
          @click="
            isUser = false;
            isTable = false;
            isSetting = true;
          "
        >
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>
        <el-menu-item
          index="6"
          @click="exit">
          <i class="el-icon-switch-button"></i>
          <span slot="title">退出</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <DetailUser v-show="isUser"></DetailUser>
      <DetailTable v-show="isTable"></DetailTable>
      <DetailSetting v-show="isSetting"></DetailSetting>
    </div>
  </div>
</template>

<script>
import DetailUser from "./DetailUser.vue";
import DetailTable from "./DetailTable.vue";
import DetailSetting from "./DetailSetting.vue";
export default {
  name: "Detail",
  components: { DetailUser, DetailTable, DetailSetting },
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  },
  data() {
    return {
      defaultActive: "3",
      isCollapse: true,
      isTable: false,
      isUser: true,
      isSetting: false,
    };
  },
  methods: {
    exit:function(){
      this.$confirm('此操作将退出账号，是否继续？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:"warning"
      }).then(() =>{
        this.$message.success("退出成功");
        this.$store.commit('setInit');
        sessionStorage.clear();
        this.$router.push('/login');
      })
     
    }
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: 100%;
  text-align: left;
  font: 20px/40px "Microsoft Yahei";
  margin: 0;
  padding: 0;
}
.nav {
  float: left;
  padding: 0;
  height: 100%;
  width: auto;
}
.detail {
  padding: 0;
  margin: 0;
  display: block;
  background-color: #e1e1e1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.el-menu-vertical {
  height: 100%;
  border-right: 2px solid #ddd;
  margin-right: 50px;
}
</style>